<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子千 - 原神烹调</title>

    <link rel="stylesheet" href="./assets/import/element-plus.css"/>
    <link href="./assets/import/tailwind.min.css" rel="stylesheet">
    <script src="./assets/import/vue.js"></script>
    <script src="./assets/import/element-plus.js"></script>
    <script src="./assets/import/axios.js"></script>
    <script>
      const APP_NAME = document.title
      const APP_VERSION = '1.2.7 - Preview'

      const data = {
        artifacts: [],
        items: [],
        roles: [],
        weapons: []
      }
    </script>
    <style>
        body {
            --el-color-primary: #545454;
            --el-border-color-light: #d4cbc1;
            --el-bg-color-overlay: #d4cbc1;
        }

        .el-dropdown-menu__item:not(.is_disabled):focus {
            background: #ada299 !important;
            color: #333333 !important;
            font-weight: bold !important;
        }

        #app {
            height: 100vh;
        }

        .tab_wrapper {
            height: calc(100vh - 38px);
            background: #f7f1ed;
            overflow: hidden;
        }

        .el-tabs {
            border: none !important;
        }

        .el-tabs__content {
            padding: 0 !important;
        }

        .el-tabs__header {
            background: #d4cbc1 !important;
        }

        .el-dropdown-menu {
            background: #d4cbc1 !important;
            box-shadow: 0 0 0 1px #d4cbc1 inset !important;
        }

        .el-tabs__header.is-bottom {
            border-top: #d4cbc1 !important;
            margin-top: 0 !important;
        }

        .el-tabs__item.is-bottom {
            color: #545454 !important;
        }

        .el-tabs__item.is-bottom:hover {
            color: #333333 !important;
        }

        .el-tabs__item.is-bottom.is-active {
            border-top: #f7f1ed !important;
            border-right-color: #f7f1ed !important;
            border-left-color: #f7f1ed !important;
            background: #f7f1ed !important;
            color: #333333 !important;
        }

        .zps_wrapper {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .zp_wrapper {
            width: 200px;
            margin: 5px;
            background: #d4cbc180;
            border-radius: 6px;
            padding-bottom: 5px;
        }

        .zp_edit_wrapper {
            width: 200px;
            background: #d4cbc180;
            border-radius: 6px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .zp_edit_wrapper .zp_role_wrapper,
        .zp_edit_wrapper .zp_weapon_wrapper,
        .zp_edit_wrapper .zp_artifacts_wrapper {
            cursor: unset;
        }

        .zp_blank_wrapper {
            width: 200px;
            height: 0;
            margin: 0 5px;
        }

        .zp_role_cover_wrapper {
            width: 190px;
            height: 190px;
            background: #545454;
            color: #ffffff;
            border-radius: 6px 6px 0 0;
            font-size: 60px;
            line-height: 180px;
            text-align: center;
        }

        .zp_cover_wrapper img {
            width: 100%;
            height: 100%;
            border-radius: 6px 6px 0 0;
        }

        .zp_role_name_wrapper {
            text-align: center;
            background: #545454;
            color: #ffffff;
            font-size: 14px;
            height: 20px;
            line-height: 20px;
            border-radius: 0 0 6px 6px;
        }

        .zp_line_wrapper {
            background: #54545440;
            font-size: 10px;
            margin: 0 auto;
            display: flex;
            height: 16px;
            line-height: 16px;
        }

        .zp_line_icon_wrapper {
            background: #545454;
            color: #ffffff;
            width: 40px;
            text-align: center;
        }

        .zp_line_content_wrapper {
            width: calc(100% - 40px - 20px);
        }

        .zp_line_number_wrapper {
            background: #545454;
            color: #ffffff;
            width: 20px;
            text-align: center;
        }

        .zp_role_info_wrapper {
            border-radius: 6px;
            overflow: hidden;
            margin: 5px auto 0;
        }

        .zp_role_skill_wrapper {
            border-radius: 6px;
            overflow: hidden;
            margin: 5px auto 0;
        }

        .zp_more_item_wrapper > .zp_line_content_wrapper {
            width: calc(100% - 40px - 40px);
        }

        .zp_line_content_in_wrapper {
            background: #545454;
            height: 16px;
            width: 0;
        }

        .zp_more_item_wrapper > .zp_line_number_wrapper {
            width: 40px;
        }

        .zp_weapon_wrapper {
            width: calc(100% - 10px);
            margin: 5px auto 0;
            display: flex;
            cursor: pointer;
            align-items: center;
        }

        .zp_role_wrapper {
            width: calc(100% - 10px);
            margin: 5px auto 0;
            cursor: pointer;
        }

        .zp_artifacts_wrapper {
            width: calc(100% - 10px);
            margin: 5px auto 0;
            cursor: pointer;
        }

        .zp_artifacts_more_wrapper {
            border-radius: 6px;
            overflow: hidden;
            margin-top: 5px;
        }

        .zp_weapon_cover_wrapper {
            width: 48px;
            height: 48px;
            background: #545454;
            color: #ffffff;
            border-radius: 6px;
            font-size: 40px;
            line-height: 48px;
            text-align: center;
            overflow: hidden;
        }

        .zp_weapon_number_wrapper {
            margin-left: 5px;
            width: calc(100% - 48px - 5px);
            border-radius: 6px;
            overflow: hidden;
        }

        .zp_weapon_name_wrapper {
            background: #545454;
            color: #ffffff;
            text-align: center;
            font-size: 10px;
            height: 16px;
            line-height: 16px;
        }

        .zp_artifacts_info_wrapper {
            display: flex;
        }

        .zp_artifacts_cover_wrapper {
            width: 32px;
            height: 32px;
            background: #545454;
            color: #ffffff;
            border-radius: 6px;
            font-size: 30px;
            line-height: 32px;
            text-align: center;
            overflow: hidden;
            position: relative;
        }

        .zp_artifact_a_cover_wrapper {
            position: absolute;
            width: 32px;
            height: 32px;
            overflow: hidden;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

        .zp_artifact_a_cover_wrapper img {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 10px 100%, 0% 100%);
        }

        .zp_artifact_b_cover_wrapper {
            position: absolute;
            width: 32px;
            height: 32px;
            overflow: hidden;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

        .zp_artifact_b_cover_wrapper img {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            clip-path: polygon(calc(100% - 10px) 0%, 100% 0%, 100% 100%, 10px 100%);

        }

        .zp_artifacts_content_wrapper {
            margin-left: 5px;
            width: calc(100% - 36px);
            border-radius: 6px;
            overflow: hidden;
        }

        .zp_artifacts_name_wrapper {
            background: #545454;
            color: #ffffff;
            text-align: center;
            font-size: 10px;
            height: 16px;
            line-height: 16px;
        }

        .zp_artifacts_content_list_wrapper {
            display: flex;
            background: #545454;
            color: #ffffff;
            text-align: center;
            font-size: 10px;
            height: 16px;
            line-height: 16px;
        }

        .zp_line_value_wrapper {
            width: calc(100% - 40px);
            text-align: center;
            font-size: 10px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            overflow: hidden;
            padding: 0 6px;
        }

        .el-slider__button {
            width: 10px !important;
            height: 10px !important;
        }

        .zp_line_value_item_wrapper {
            flex: 1;
        }

        .zp_line_title_wrapper {
            display: flex;
            width: calc(100% - 40px);
        }

        .zp_line_title_item_wrapper {
            flex: 1;
            background: #545454;
            color: #ffffff;
            text-align: center;
            font-size: 10px;
            height: 16px;
            line-height: 16px;
        }

        .zp_line_value_item_wrapper input {
            width: calc(100% - 5px);
            background: #00000000;
            text-align: center;
        }

        .zp_artifacts_content_item_wrapper {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .zp_artifacts_content_item_show_wrapper {
            color: #ffffff;
            font-size: 10px;
            line-height: 15px;
            text-align: center;
            width: 20px;
            margin-left: 5px;
        }

        .player_wrapper {
            width: calc(100% - 20px);
            margin: 10px auto;
            line-height: 70px;
            height: 80px;
            background: #e4dcd6;
            border: 5px solid #e4dcd6;
            border-radius: 40px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
        }

        .player_wrapper:hover {
            border: 5px solid #cec4ba;
        }

        .player_active_wrapper {
            border: 5px solid #cec4ba;
        }

        .player_name_wrapper {
            margin-left: 40px;
            font-size: 20px;
        }

        .player_create_wrapper {
            flex: 1;
            font-size: 20px;
            text-align: center;
        }

        .player_button_wrapper {
            margin-right: 40px;
        }

        .el-dialog {
            background: #f6efeb !important;
            border-color: #f6efeb !important;
            border-radius: 6px !important;
            overflow: hidden;
        }

        .zp_artifacts_content_item_delete_wrapper {
            text-decoration: line-through;
            opacity: .3;
        }

        .role_button_wrapper {
            margin-top: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }

        .dialog_header_wrapper {
            width: 100%;
            background: #545454;
            color: #ffffff;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 40px;
            line-height: 40px;
        }

        .dialog_input_wrapper {
            margin-top: 10px;
            text-align: center;
        }

        .el-input__wrapper.is-focus {
            box-shadow: 0 0 0 1px #545454 inset !important;
        }

        .zp_create_wrapper {
            cursor: pointer;
        }

        .edit_wrapper {
            display: flex;

        }

        .dialog_wrapper {
            margin-top: 30px;
        }

        .choose_wrapper {
            margin-left: 5px;
            width: calc(100% - 205px);
            height: 100%;
        }

        .choose_role_box_wrapper {
            height: 215px;
            border-radius: 6px;
            overflow: hidden;
        }

        .choose_weapon_box_wrapper {
            height: 170px;
            border-radius: 6px;
            overflow: hidden;
            margin-top: 5px;
        }

        .choose_artifacts_box_wrapper {
            height: 149px;
            border-radius: 6px;
            overflow: hidden;
            margin-top: 5px;
        }

        .choose_weapon_wrapper,
        .choose_artifacts_wrapper,
        .choose_role_wrapper {
            display: flex;
            flex-wrap: wrap;
        }

        .choose_item_wrapper {
            margin-right: 5px;
            margin-bottom: 5px;
            cursor: pointer;
            border-radius: 6px;
        }

        .choose_item_wrapper:hover {
            box-shadow: 0 10px 10px #33333380;
        }

        .choose_item_cover_wrapper {
            width: calc((950px - 70px) / 14);
            height: calc((950px - 70px) / 14);
            background: #545454;
            color: #ffffff;
            border-radius: 6px 6px 0 0;
            font-size: 50px;
            line-height: calc((950px - 70px) / 14);
            text-align: center;
        }

        .choose_item_name_wrapper {
            width: calc((950px - 70px) / 14);
            text-align: center;
            background: #545454;
            color: #ffffff;
            font-size: 12px;
            height: 20px;
            line-height: 20px;
            border-radius: 0 0 6px 6px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .search_input_wrapper {
            width: 945px;
            margin-top: 5px;
        }

        .backpack_wrapper {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: 10px 0;
        }

        .plan_line_wrapper {
            display: flex;
            flex-wrap: wrap;
        }

        .backpack_item_wrapper {
            width: 120px;
            margin: 5px;
            text-align: center;
            border-radius: 20px;
            overflow: hidden;
            background: #e6e1d8;
            font-size: 14px;
        }

        .backpack_config_wrapper {
            width: 120px;
            margin: 5px;
            border-radius: 20px;
            overflow: hidden;
            background: #e6e1d8;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .gold_average_title_wrapper {
            width: 100px;
            text-align: center;
            line-height: 30px;
            font-weight: bold;
        }

        .gold_average_title_wrapper input {
            width: 100px;
            text-align: center;
            border-radius: 6px;
        }

        .backpack_blank_wrapper {
            width: 120px;
            margin: 0 5px;
        }

        .backpack_item_value_wrapper {
            display: flex;
            font-size: 14px;
            line-height: 24px;
            height: 24px;
        }

        .plan_item_value_wrapper {
            display: flex;
            font-size: 10px;
            line-height: 16px;
            height: 16px;
        }

        .backpack_item_value_item_wrapper {
            flex: 1;
        }

        .backpack_item_value_item_wrapper input {
            width: 100%;
            background: #00000000;
            text-align: center;
        }

        .backpack_item_value_item_wrapper input[type="text"]:focus {
            outline: none;
            border: none;
        }

        .backpack_item_icon_wrapper {
            width: 120px;
            height: 124px;
        }

        .backpack_item_icon_wrapper img {
            width: 120px;
            height: 124px;
            border-radius: 20px;
        }

        .plan_item_wrapper {
            width: 60px;
            margin: 5px;
            text-align: center;
            border-radius: 10px;
            overflow: hidden;
            background: #e6e1d8;
            position: relative;
        }

        .plan_item_blank_wrapper {
            height: 96px;
            margin: 5px;
        }

        .plan_item_icon_wrapper {
            width: 60px;
            height: 64px;
        }

        .plan_item_icon_wrapper img {
            width: 60px;
            height: 64px;
            border-radius: 10px;
        }

        .plan_item_video_wrapper {
            width: 25px;
            height: 25px;
            position: absolute;
            top: 0;
            right: 0;
        }

        .plan_item_video_wrapper img {
            width: 25px;
            height: 25px;
        }

        .backpack_item_name_wrapper {
            font-weight: bold;
            height: 22px;
            line-height: 22px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .plan_item_name_wrapper {
            font-size: 10px;
            font-weight: bold;
            height: 16px;
            line-height: 16px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .plan_table_wrapper {
            border-collapse: collapse;
            width: 100%;
        }

        .plan_table_wrapper th,
        .plan_table_wrapper td {
            border: 1px solid #ccc;
            padding: 10px;
        }

        .plan_wrapper {
            padding: 10px;
        }

        .no_tip_wrapper {
            width: 100%;
            line-height: calc(100vh - 200px);
            text-align: center;
            font-size: 18px;
            color: #948b7e;
        }

        .week_active_wrapper {
            background: #d9ccc360;
        }
    </style>
</head>
<body>
<div id="app">
    <el-config-provider :button="button_config">
        <div>
            <el-tabs v-model="tab_active" class="tabs_wrapper" type="border-card" class="demo-tabs"
                     tab-position="bottom" @tab-change="tabChange">
                <el-tab-pane disabled label="" name="">
                    <div class="tab_wrapper"></div>
                </el-tab-pane>
                <el-tab-pane label="装配" name="zp">
                    <div class="tab_wrapper">
                        <el-scrollbar>
                            <div v-if="player.length !== 0" class="zps_wrapper">
                                <div class="zp_wrapper zp_create_wrapper">
                                    <div @click="createRole()" class="zp_role_wrapper">
                                        <div class="zp_role_cover_wrapper">?</div>
                                        <div class="zp_role_name_wrapper">添加角色</div>
                                        <div class="zp_role_info_wrapper">
                                            <div class="zp_role_count_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">命座</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper"></div>
                                            </div>
                                            <div class="zp_role_level_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">等级</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper"></div>
                                            </div>
                                        </div>
                                        <div class="zp_role_skill_wrapper">
                                            <div class="zp_skill_item_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">Q</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper"></div>
                                            </div>
                                            <div class="zp_skill_item_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">E</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper"></div>
                                            </div>
                                            <div class="zp_skill_item_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">A</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div @click="createRole()" class="zp_weapon_wrapper">
                                        <div class="zp_weapon_cover_wrapper">?</div>
                                        <div class="zp_weapon_number_wrapper">
                                            <div class="zp_weapon_name_wrapper">添加武器</div>
                                            <div class="zp_weapon_item_number_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">精炼</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper"></div>
                                            </div>
                                            <div class="zp_weapon_item_number_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">等级</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div @click="createRole()" class="zp_artifacts_wrapper">
                                        <div class="zp_artifacts_info_wrapper">
                                            <div class="zp_artifacts_cover_wrapper">?</div>
                                            <div class="zp_artifacts_content_wrapper">
                                                <div class="zp_artifacts_name_wrapper">添加圣遗物</div>
                                                <div class="zp_artifacts_content_list_wrapper">
                                                    <div class="zp_artifacts_content_item_wrapper"></div>
                                                    <div class="zp_artifacts_content_item_wrapper"></div>
                                                    <div class="zp_artifacts_content_item_wrapper"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-if="value_info_show" class="zp_artifacts_more_wrapper">
                                            <div class="zp_more_item_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">生命</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper"></div>
                                            </div>
                                            <div class="zp_more_item_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">攻击</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper"></div>
                                            </div>
                                            <div class="zp_more_item_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">精通</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper"></div>
                                            </div>
                                            <div class="zp_more_item_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">暴击</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper"></div>
                                            </div>
                                            <div class="zp_more_item_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">暴伤</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper"></div>
                                            </div>
                                            <div class="zp_more_item_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">充能</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="role_button_wrapper">
                                        <el-switch v-model="value_info_show"
                                                   class="mx-1"
                                                   @change="valueInfoShowChange()"
                                                   style="--el-switch-off-color: #afa39a"
                                                   width="60" inline-prompt active-text="显示"
                                                   inactive-text="隐藏"></el-switch>
                                        <el-switch v-model="order_list_show"
                                                   class="mx-1"
                                                   style="--el-switch-off-color: #afa39a"
                                                   width="60" inline-prompt active-text="装配"
                                                   inactive-text="排序"></el-switch>
                                    </div>
                                </div>
                                <div v-for="(ri,rk) in role_show" :key="rk" class="zp_wrapper">
                                    <div @click="updateRole(rk)" class="zp_role_wrapper">
                                        <div class="zp_role_cover_wrapper zp_cover_wrapper">
                                            <div v-if="!!ri.role.name">
                                                <img :src="data_map.roles[ri.role.name].icon" alt="">
                                            </div>
                                            <div v-else>?</div>
                                        </div>
                                        <div class="zp_role_name_wrapper">
                                            {{ ri.role.name || '添加角色' }}
                                        </div>
                                        <div class="zp_role_info_wrapper">
                                            <div class="zp_role_count_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">命座</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper" :style="{
                                                    width: `${ri.role.count[0]}%`
                                                    }"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper">
                                                    {{ ri.role.count[1] }}
                                                </div>
                                            </div>
                                            <div class="zp_role_level_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">等级</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper" :style="{
                                                    width: `${ri.role.level[0]}%`
                                                    }"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper">
                                                    {{ ri.role.level[1] }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="zp_role_skill_wrapper">
                                            <div class="zp_skill_item_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">Q</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper" :style="{
                                                    width: `${ri.role.skill.q[0]}%`
                                                    }"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper">
                                                    {{ ri.role.skill.q[1] }}
                                                </div>
                                            </div>
                                            <div class="zp_skill_item_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">E</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper" :style="{
                                                    width: `${ri.role.skill.e[0]}%`
                                                    }"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper">
                                                    {{ ri.role.skill.e[1] }}
                                                </div>
                                            </div>
                                            <div class="zp_skill_item_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">A</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper" :style="{
                                                    width: `${ri.role.skill.a[0]}%`
                                                    }"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper">
                                                    {{ ri.role.skill.a[1] }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div @click="updateRole(rk)" class="zp_weapon_wrapper">
                                        <div class="zp_weapon_cover_wrapper zp_cover_wrapper">
                                            <div v-if="!!ri.weapon.name">
                                                <img :src="data_map.weapons[ri.weapon.name].icon" alt="">
                                            </div>
                                            <div v-else>?</div>
                                        </div>
                                        <div class="zp_weapon_number_wrapper">
                                            <div class="zp_weapon_name_wrapper">
                                                {{ ri.weapon.name || '添加武器' }}
                                            </div>
                                            <div class="zp_weapon_item_number_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">精炼</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper" :style="{
                                                    width: `${ri.weapon.count[0]}%`
                                                    }"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper">
                                                    {{ ri.weapon.count[1] }}
                                                </div>
                                            </div>
                                            <div class="zp_weapon_item_number_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">等级</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper" :style="{
                                                    width: `${ri.weapon.level[0]}%`
                                                    }"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper">
                                                    {{ ri.weapon.level[1] }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div @click="updateRole(rk)" class="zp_artifacts_wrapper">
                                        <div class="zp_artifacts_info_wrapper">
                                            <div class="zp_artifacts_cover_wrapper">
                                                <div v-if="!!ri.artifacts.a">
                                                    <div v-if="!!ri.artifacts.a" class="zp_artifact_a_cover_wrapper">
                                                        <img :src="data_map.artifacts[ri.artifacts.a].icon" alt="">
                                                    </div>
                                                    <div v-if="!!ri.artifacts.b" class="zp_artifact_b_cover_wrapper">
                                                        <img :src="data_map.artifacts[ri.artifacts.b].icon" alt="">
                                                    </div>
                                                </div>
                                                <div v-else>?</div>
                                            </div>
                                            <div class="zp_artifacts_content_wrapper">
                                                <div class="zp_artifacts_name_wrapper">
                            <span
                                    v-if="!!ri.artifacts.a">{{ ri.artifacts.a
                                }}{{ ri.artifacts.b !== ri.artifacts.a ? ` + ${ri.artifacts.b}` : '' }}</span>
                                                    <span v-else>添加圣遗物</span>
                                                </div>
                                                <div class="zp_artifacts_content_list_wrapper">
                                                    <div class="zp_artifacts_content_item_wrapper"
                                                         :class="[!!ri.artifacts.sl[1] ? 'zp_artifacts_content_item_delete_wrapper' : '']">
                                                        {{ ri.artifacts.sl[0] }}
                                                    </div>
                                                    <div class="zp_artifacts_content_item_wrapper"
                                                         :class="[!!ri.artifacts.bz[1] ? 'zp_artifacts_content_item_delete_wrapper' : '']">
                                                        {{ ri.artifacts.bz[0] }}
                                                    </div>
                                                    <div class="zp_artifacts_content_item_wrapper"
                                                         :class="[!!ri.artifacts.tg[1] ? 'zp_artifacts_content_item_delete_wrapper' : '']">
                                                        {{ ri.artifacts.tg[0] }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-if="value_info_show" class="zp_artifacts_more_wrapper">
                                            <div class="zp_more_item_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">生命</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper" :style="{
                                                    width: `${ri.info.sm[0]}%`
                                                    }"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper">
                                                    {{ ri.info.sm[1] }}
                                                </div>
                                            </div>
                                            <div class="zp_more_item_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">攻击</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper" :style="{
                                                    width: `${ri.info.gj[0]}%`
                                                    }"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper">
                                                    {{ ri.info.gj[1] }}
                                                </div>
                                            </div>
                                            <div class="zp_more_item_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">精通</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper" :style="{
                                                    width: `${ri.info.jt[0]}%`
                                                    }"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper">
                                                    {{ ri.info.jt[1] }}
                                                </div>
                                            </div>
                                            <div class="zp_more_item_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">暴击</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper" :style="{
                                                    width: `${ri.info.bj[0]}%`
                                                    }"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper">
                                                    {{ ri.info.bj[1] }}
                                                </div>
                                            </div>
                                            <div class="zp_more_item_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">暴伤</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper" :style="{
                                                    width: `${ri.info.bs[0]}%`
                                                    }"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper">
                                                    {{ ri.info.bs[1] }}
                                                </div>
                                            </div>
                                            <div class="zp_more_item_wrapper zp_line_wrapper">
                                                <div class="zp_line_icon_wrapper">充能</div>
                                                <div class="zp_line_content_wrapper">
                                                    <div class="zp_line_content_in_wrapper" :style="{
                                                    width: `${ri.info.cn[0]}%`
                                                    }"></div>
                                                </div>
                                                <div class="zp_line_number_wrapper">
                                                    {{ ri.info.cn[1] }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="role_button_wrapper">
                                        <el-switch v-model="player[player_active].role[rk].computed"
                                                   @change="roleComputed(rk)"
                                                   class="mx-1"
                                                   style="--el-switch-off-color: #afa39a"
                                                   width="60" inline-prompt active-text="计算"
                                                   inactive-text="忽略"></el-switch>
                                        <template v-if="order_list_show">
                                            <el-button class="mx-1" @click="deleteRole(rk)" link type="danger">
                                                移除
                                            </el-button>
                                            <el-button class="mx-1" @click="copyRole(rk)" link type="info">
                                                复制
                                            </el-button>
                                        </template>
                                        <template v-else>
                                            <el-button :disabled="rk === 0" class="mx-1" @click="moveRoleClick(rk,-1)"
                                                       link type="info">
                                                左移
                                            </el-button>
                                            <el-button :disabled="rk === player[player_active].role.length - 1"
                                                       class="mx-1" @click="moveRoleClick(rk,1)" link type="info">
                                                右移
                                            </el-button>
                                        </template>
                                    </div>
                                </div>
                                <div v-for="i in 10" :key="i" class="zp_blank_wrapper"></div>
                            </div>
                        </el-scrollbar>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="背包" name="bb">
                    <div class="tab_wrapper">
                        <el-scrollbar>
                            <div v-if="player.length !== 0 && !!player[player_active].backpack"
                                 class="backpack_wrapper">
                                <div v-if="!!player[player_active].backpack.backpack" class="backpack_config_wrapper">
                                    <div class="gold_average_wrapper">
                                        <div class="gold_average_title_wrapper">角色出金频率</div>
                                        <div class="gold_average_title_wrapper">
                                            <input @change="(e)=>{
                          backpackGoldUpdate(e,'role_average')
                        }" type="text"
                                                   v-model="player[player_active].backpack.role_average">
                                        </div>
                                        <div class="gold_average_title_wrapper">武器出金频率</div>
                                        <div class="gold_average_title_wrapper">
                                            <input @change="(e)=>{
                          backpackGoldUpdate(e,'weapon_average')
                        }" type="text"
                                                   v-model="player[player_active].backpack.weapon_average">
                                        </div>
                                    </div>
                                </div>
                                <div v-if="!!player[player_active].backpack.backpack" class="backpack_item_wrapper">
                                    <div class="backpack_item_icon_wrapper">
                                        <img :src="backpackIcon('纠缠之缘')" alt="">
                                    </div>
                                    <div class="backpack_item_name_wrapper">
                                        <span>纠缠之缘</span>
                                    </div>
                                    <div class="backpack_item_value_wrapper">
                                        <div class="backpack_item_value_item_wrapper">
                                            <input @change="(e)=>{
                          backpackValueUpdate(e,'纠缠之缘')
                        }" type="text"
                                                   v-model="player[player_active].backpack.backpack['纠缠之缘']">
                                        </div>
                                    </div>
                                </div>
                                <div class="backpack_item_wrapper" v-for="(bi,bk) in backpack_show">
                                    <div class="backpack_item_icon_wrapper">
                                        <img :src="backpackIcon(bi.name)" alt="">
                                    </div>
                                    <div class="backpack_item_name_wrapper">
                                        <span>{{ bi.name }}</span>
                                        <span v-if="bi.name === '摩拉'">(单位万)</span>
                                    </div>
                                    <div class="backpack_item_value_wrapper">
                                        <div class="backpack_item_value_item_wrapper">
                                            <input @change="(e)=>{
                          backpackValueUpdate(e,bi.name)
                        }" type="text"
                                                   v-model="player[player_active].backpack.backpack[bi.name]">
                                        </div>
                                    </div>
                                </div>
                                <div v-for="i in 15" :key="i" class="backpack_blank_wrapper"></div>
                            </div>
                        </el-scrollbar>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="需求" name="xq">
                    <div class="tab_wrapper">
                        <el-scrollbar>
                            <div v-if="player.length !== 0" class="backpack_wrapper">
                                <div v-if="need_list.length === 0" class="no_tip_wrapper">暂无获取需求</div>
                                <div v-if="need_list.length > 0" class="backpack_config_wrapper">
                                    <el-switch v-model="backpack_value_show"
                                               class="mx-1"
                                               @change="checkBackpackValueChange()"
                                               style="--el-switch-off-color: #afa39a"
                                               width="60" inline-prompt active-text="需求"
                                               inactive-text="总量"></el-switch>
                                </div>
                                <div v-if="need_list.length > 0" class="backpack_item_wrapper"
                                     v-for="(bi,bk) in need_list">
                                    <div class="backpack_item_icon_wrapper">
                                        <img :src="backpackIcon(bi.name)" alt="">
                                    </div>
                                    <div class="backpack_item_name_wrapper">
                                        <span>{{ bi.name }}</span>
                                    </div>
                                    <div class="backpack_item_value_wrapper">
                                        <div class="backpack_item_value_item_wrapper">
                                            {{ bi.count }}
                                            <span v-if="bi.name === '摩拉'">万</span>
                                        </div>
                                    </div>
                                </div>
                                <div v-for="i in 15" :key="i" class="backpack_blank_wrapper"></div>
                            </div>
                        </el-scrollbar>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="计划" name="jh">
                    <div class="tab_wrapper">
                        <el-scrollbar>
                            <div>
                                <div v-if="!!plan_list" class="plan_wrapper">
                                    <table class="plan_table_wrapper">
                                        <tr>
                                            <th>
                                                <el-switch v-model="backpack_value_show"
                                                           class="mx-1"
                                                           @change="checkBackpackValueChange()"
                                                           style="--el-switch-off-color: #afa39a"
                                                           width="60" inline-prompt active-text="需求"
                                                           inactive-text="总量"></el-switch>
                                            </th>
                                            <th>角色天赋素材</th>
                                            <th>武器突破素材</th>
                                        </tr>
                                        <tr v-for="(pti,ptk) in [['周一 周四','周一/周四/周日'], ['周二 周五','周二/周五/周日'], ['周三 周六','周三/周六/周日']]">
                                            <th width="180">{{ pti[0] }}</th>
                                            <template v-for="(pli,plk) in ['角色天赋素材', '武器突破素材']">
                                                <td :class="[
                          week_day === '周日' || week_day === pti[1] ? 'week_active_wrapper' : ''
                          ]">
                                                    <div class="plan_line_wrapper">
                                                        <div class="plan_item_blank_wrapper"></div>
                                                        <div class="plan_item_wrapper"
                                                             v-for="(bi,bk) in plan_list[pli][pti[1]]">
                                                            <el-tooltip placement="top">
                                                                <template #content>
                                                                    <div class="text-center">
                                                                        <span v-if="bi.need.length > 0">{{ bi.need[0]
                                                                            }}</span>
                                                                        <span v-if="bi.need.length > 1">、{{ bi.need[1]
                                                                            }}</span>
                                                                        <span v-if="bi.need.length > 2"> 等 {{ bi.need.length - 2}} 个{{ pli[0]
                                                                            }}{{ pli[1] }}</span>
                                                                    </div>
                                                                </template>
                                                                <div class="cursor-pointer">
                                                                    <div class="plan_item_icon_wrapper">
                                                                        <img :src="backpackIcon(bi.name)" alt="">
                                                                    </div>
                                                                    <div class="plan_item_name_wrapper">
                                                                        <span>{{ bi.name }}</span>
                                                                    </div>
                                                                    <div class="plan_item_value_wrapper">
                                                                        <div class="backpack_item_value_item_wrapper">
                                                                            {{ bi.count }}
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </el-tooltip>
                                                        </div>
                                                    </div>
                                                </td>
                                            </template>
                                        </tr>
                                        <tr>
                                            <th>圣遗物</th>
                                            <td colspan="2">
                                                <div class="plan_line_wrapper">
                                                    <div class="plan_item_blank_wrapper"></div>
                                                    <div class="plan_item_wrapper"
                                                         v-for="(bi,bk) in plan_list['圣遗物']">
                                                        <el-tooltip placement="top">
                                                            <template #content>
                                                                <div class="text-center">
                                                                    <span v-if="bi.bz.count > 0">{{ bi.bz.need[0]
                                                                        }}</span>
                                                                    <span v-if="bi.bz.count > 1"> 等 {{ bi.bz.count - 1
                                                                        }} 个角色</span>
                                                                    <span v-if="bi.bz.count === 0">暂无角色</span>
                                                                    <span>需求杯子</span>
                                                                </div>
                                                                <div class="text-center">
                                                                    <span v-if="bi.sl.count > 0">{{ bi.sl.need[0]
                                                                        }}</span>
                                                                    <span v-if="bi.sl.count > 1"> 等 {{ bi.sl.count - 1
                                                                        }} 个角色</span>
                                                                    <span v-if="bi.sl.count === 0">暂无角色</span>
                                                                    <span>需求沙漏</span>
                                                                </div>
                                                                <div class="text-center">
                                                                    <span v-if="bi.tg.count > 0">{{ bi.tg.need[0]
                                                                        }}</span>
                                                                    <span v-if="bi.tg.count > 1"> 等 {{ bi.tg.count - 1
                                                                        }} 个角色</span>
                                                                    <span v-if="bi.tg.count === 0">暂无角色</span>
                                                                    <span>需求头冠</span>
                                                                </div>
                                                                <div class="text-center">
                                                                    <span v-if="bi.tz.count > 0">{{ bi.tz.need[0]
                                                                        }}</span>
                                                                    <span v-if="bi.tz.count > 1"> 等 {{ bi.tz.count - 1
                                                                        }} 个角色</span>
                                                                    <span v-if="bi.tz.count === 0">暂无角色</span>
                                                                    <span>需要微调</span>
                                                                </div>
                                                            </template>
                                                            <div class="cursor-pointer">
                                                                <div class="plan_item_icon_wrapper">
                                                                    <img :src="data_map.artifacts[bi.name].icon" alt="">
                                                                </div>
                                                                <div class="plan_item_name_wrapper">
                                                                    <span>{{ bi.name }}</span>
                                                                </div>
                                                                <div class="plan_item_value_wrapper">
                                                                    <div class="backpack_item_value_item_wrapper">
                                                                        {{ bi.bz.count }}
                                                                    </div>
                                                                    <div class="backpack_item_value_item_wrapper">
                                                                        {{ bi.sl.count }}
                                                                    </div>
                                                                    <div class="backpack_item_value_item_wrapper">
                                                                        {{ bi.tg.count }}
                                                                    </div>
                                                                    <div class="backpack_item_value_item_wrapper">
                                                                        {{ bi.tz.count }}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </el-tooltip>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr v-for="(pli,plk) in [['周本材料',['天赋培养素材']],['首领',['角色突破素材','角色培养素材']],['怪物材料',['角色与武器培养素材']],  ['精英怪物',['武器培养素材']], ['特产',['特产']], ['其他材料',['其他材料']]]">
                                            <th>{{ pli[0] }}</th>
                                            <td colspan="2">
                                                <div class="plan_line_wrapper">
                                                    <div class="plan_item_blank_wrapper"></div>
                                                    <template v-for="(bi,bk) in pli[1]">
                                                        <div :key="bk" @click="openVideoClick(bii.video)"
                                                             class="plan_item_wrapper"
                                                             :class="[!!bii.video ? 'cursor-pointer' : '']"
                                                             v-for="(bii,bik) in plan_list[bi]">
                                                            <el-tooltip placement="top">
                                                                <template #content>
                                                                    <div class="text-center">
                                                                        <span v-if="bii.need.length > 0">{{ bii.need[0]
                                                                            }}</span>
                                                                        <span v-if="bii.need.length > 1">、{{ bii.need[1]
                                                                            }}</span>
                                                                        <span v-if="bii.need.length > 2"> 等 {{ bii.need.length - 2}} 个{{ needMoreType(bii.need)
                                                                            }}</span>
                                                                    </div>
                                                                </template>
                                                                <div class="cursor-pointer">
                                                                    <div v-if="!!bii.video"
                                                                         class="plan_item_video_wrapper">
                                                                        <img src="./assets/image/video.png" alt="">
                                                                    </div>
                                                                    <div class="plan_item_icon_wrapper">
                                                                        <img :src="backpackIcon(bii.name)" alt="">
                                                                    </div>
                                                                    <div class="plan_item_name_wrapper">
                                                                        <span>{{ bii.name }}</span>
                                                                    </div>
                                                                    <div class="plan_item_value_wrapper">
                                                                        <div class="backpack_item_value_item_wrapper">
                                                                            {{ bii.count }}
                                                                            <span v-if="bii.name === '摩拉'">万</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </el-tooltip>
                                                        </div>
                                                    </template>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </el-scrollbar>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="角色" name="js">
                    <div class="tab_wrapper">
                        <el-scrollbar>
                            <div @click="createPlayer()" class="player_wrapper">
                                <div class="player_create_wrapper">创建新角色</div>
                            </div>
                            <div @click="importPlayer()" class="player_wrapper">
                                <div class="player_create_wrapper">导入角色</div>
                            </div>
                            <div class="player_list_wrapper">
                                <div @click="playerActive(pk)" v-for="(pi,pk) in player" :key="pk"
                                     class="player_wrapper"
                                     :class="[player_active === pk ? 'player_active_wrapper' : '']">
                                    <div class="player_name_wrapper">{{ pi.name }}</div>
                                    <div class="player_button_wrapper">
                                        <el-button @click.stop="editPlayer(pi,pk)" link>编辑</el-button>
                                        <el-button @click.stop="sharePlayer(pi)" link>分享</el-button>
                                        <el-button @click.stop="deletePlayer(pk)" link type="danger">删除</el-button>
                                    </div>
                                </div>
                            </div>
                        </el-scrollbar>
                    </div>
                </el-tab-pane>
            </el-tabs>

            <el-dialog :show-close="false" draggable v-model="dialog_show" :width="dialog_option.width">
                <div class="dialog_wrapper">
                    <div v-if="!!dialog_option.content">{{ dialog_option.content }}</div>
                    <div v-if="dialog_option.type !== 'info'" class="dialog_input_wrapper">
                        <div v-if="dialog_option.type === 'text'">
                            <el-input v-model="dialog_option.input"></el-input>
                        </div>
                        <div v-if="dialog_option.type === 'textarea'">
                            <el-input :autosize="{
                            minRows: 10, maxRows: 10
                            }" type="textarea" v-model="dialog_option.input"></el-input>
                        </div>
                        <div v-if="dialog_option.type === 'number'">
                            <el-input-number v-model="dialog_option.input"></el-input-number>
                        </div>
                    </div>
                </div>
                <template v-if="!!dialog_option.title" #header>
                    <div class="dialog_header_wrapper">
                        {{ dialog_option.title }}
                    </div>
                </template>
                <template #footer>
                    <div>
                        <el-button v-if="!!dialog_option.cancel_text" @click="dialogCancelClick()" link>
                            {{ dialog_option.cancel_text }}
                        </el-button>
                        <el-button @click="dialogConfirmClick()" color="#545454" dark>
                            {{ dialog_option.confirm_text || '确认' }}
                        </el-button>
                    </div>
                </template>
            </el-dialog>

            <el-dialog top="40px" :show-close="false" draggable v-model="edit_show" :width="1200">
                <div class="dialog_wrapper">
                    <div class="edit_wrapper">
                        <div class="zp_edit_wrapper">
                            <div class="zp_role_wrapper">
                                <div class="zp_role_cover_wrapper zp_cover_wrapper">
                                    <div v-if="!!edit_data.role.name">
                                        <img :src="data_map.roles[edit_data.role.name].icon" alt="">
                                    </div>
                                    <div v-else>?</div>
                                </div>
                                <div class="zp_role_name_wrapper">
                                    {{ edit_data.role.name || '添加角色' }}
                                </div>
                                <div class="zp_role_info_wrapper">
                                    <div class="zp_role_count_wrapper zp_line_wrapper">
                                        <div class="zp_line_icon_wrapper">命座</div>
                                        <div class="zp_line_value_wrapper">
                                            <el-slider size="small"
                                                       v-model="edit_data.role.count" range
                                                       :min="-1" :max="6"/>
                                        </div>
                                    </div>
                                    <div class="zp_role_level_wrapper zp_line_wrapper">
                                        <div class="zp_line_icon_wrapper">等级</div>
                                        <div class="zp_line_value_wrapper">
                                            <el-slider size="small" v-model="edit_data.role.level" range
                                                       :max="90" :min="1"/>
                                        </div>
                                    </div>
                                    <div class="zp_role_level_wrapper zp_line_wrapper">
                                        <div class="zp_line_icon_wrapper">突破</div>
                                        <div class="zp_line_title_wrapper">
                                            <div class="zp_line_title_item_wrapper" :class="[
                                            breakShow('role', 0) !== '无需处理' ? 'cursor-pointer' : ''
                                            ]" @click="breakChange('role', 0)">
                                                <span>{{ breakShow('role', 0) }}</span>
                                            </div>
                                            <div class="zp_line_title_item_wrapper" :class="[
                                            breakShow('role', 1) !== '无需处理' ? 'cursor-pointer' : ''
                                            ]" @click="breakChange('role', 1)">
                                                <span>{{ breakShow('role', 1) }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="zp_role_skill_wrapper">
                                    <div class="zp_skill_item_wrapper zp_line_wrapper">
                                        <div class="zp_line_icon_wrapper">Q</div>
                                        <div class="zp_line_value_wrapper">
                                            <el-slider size="small" v-model="edit_data.role.skill.q" range
                                                       :max="10" :min="1"/>
                                        </div>
                                    </div>
                                    <div class="zp_skill_item_wrapper zp_line_wrapper">
                                        <div class="zp_line_icon_wrapper">E</div>
                                        <div class="zp_line_value_wrapper">
                                            <el-slider size="small" v-model="edit_data.role.skill.e" range
                                                       :max="10" :min="1"/>
                                        </div>
                                    </div>
                                    <div class="zp_skill_item_wrapper zp_line_wrapper">
                                        <div class="zp_line_icon_wrapper">A</div>
                                        <div class="zp_line_value_wrapper">
                                            <el-slider size="small" v-model="edit_data.role.skill.a" range
                                                       :max="10" :min="1"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="zp_weapon_wrapper">
                                <div class="zp_weapon_cover_wrapper zp_cover_wrapper">
                                    <div v-if="!!edit_data.weapon.name">
                                        <img :src="data_map.weapons[edit_data.weapon.name].icon" alt="">
                                    </div>
                                    <div v-else>?</div>
                                </div>
                                <div class="zp_weapon_number_wrapper">
                                    <div class="zp_weapon_name_wrapper">
                                        {{ edit_data.weapon.name || '添加武器' }}
                                    </div>
                                    <div class="zp_weapon_item_number_wrapper zp_line_wrapper">
                                        <div class="zp_line_icon_wrapper">精炼</div>
                                        <div class="zp_line_value_wrapper">
                                            <el-slider size="small" v-model="edit_data.weapon.count" range
                                                       :max="5" :min="0"/>
                                        </div>
                                    </div>
                                    <div class="zp_weapon_item_number_wrapper zp_line_wrapper">
                                        <div class="zp_line_icon_wrapper">等级</div>
                                        <div class="zp_line_value_wrapper">
                                            <el-slider size="small" v-model="edit_data.weapon.level" range
                                                       :max="90" :min="1"/>
                                        </div>
                                    </div>
                                    <div class="zp_weapon_item_number_wrapper zp_line_wrapper">
                                        <div class="zp_line_icon_wrapper">突破</div>
                                        <div class="zp_line_title_wrapper">
                                            <div class="zp_line_title_item_wrapper" :class="[
                                            breakShow('weapon', 0) !== '无需处理' ? 'cursor-pointer' : ''
                                            ]" @click="breakChange('weapon', 0)">
                                                <span>{{ breakShow('weapon', 0) }}</span>
                                            </div>
                                            <div class="zp_line_title_item_wrapper" :class="[
                                            breakShow('weapon', 1) !== '无需处理' ? 'cursor-pointer' : ''
                                            ]" @click="breakChange('weapon', 1)">
                                                <span>{{ breakShow('weapon', 1) }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="zp_artifacts_wrapper">
                                <div class="zp_artifacts_info_wrapper">
                                    <div class="zp_artifacts_cover_wrapper">
                                        <div v-if="!!edit_data.artifacts.a">
                                            <div v-if="!!edit_data.artifacts.a" class="zp_artifact_a_cover_wrapper">
                                                <img :src="data_map.artifacts[edit_data.artifacts.a].icon" alt="">
                                            </div>
                                            <div v-if="!!edit_data.artifacts.b" class="zp_artifact_b_cover_wrapper">
                                                <img :src="data_map.artifacts[edit_data.artifacts.b].icon" alt="">
                                            </div>
                                        </div>
                                        <div v-else>?</div>
                                    </div>
                                    <div class="zp_artifacts_content_wrapper">
                                        <div class="zp_artifacts_content_list_wrapper">
                                            <div class="zp_artifacts_content_item_wrapper">
                                                {{ edit_data.artifacts.a || '添加圣遗物' }}
                                            </div>
                                            <div class="zp_artifacts_content_item_wrapper">
                                                {{ edit_data.artifacts.b || '添加圣遗物' }}
                                            </div>
                                        </div>
                                        <div class="zp_artifacts_content_list_wrapper">
                                            <div class="zp_artifacts_content_item_wrapper">
                                                <el-checkbox v-model="edit_data.artifacts.sl[1]"
                                                             size="small"></el-checkbox>
                                                <el-dropdown>
                                                        <span class="zp_artifacts_content_item_show_wrapper">
                                                            {{ edit_data.artifacts.sl[0] || '沙' }}
                                                        </span>
                                                    <template #dropdown>
                                                        <el-dropdown-menu>
                                                            <el-dropdown-item @click="artifactsClick(i,'sl')"
                                                                              v-for="(i,k) in artifacts_map.s">
                                                                <span>{{ i }}</span>
                                                            </el-dropdown-item>
                                                        </el-dropdown-menu>
                                                    </template>
                                                </el-dropdown>
                                            </div>
                                            <div class="zp_artifacts_content_item_wrapper">
                                                <el-checkbox v-model="edit_data.artifacts.bz[1]"
                                                             size="small"></el-checkbox>
                                                <el-dropdown>
                                                        <span class="zp_artifacts_content_item_show_wrapper">
                                                            {{ edit_data.artifacts.bz[0] || '杯' }}
                                                        </span>
                                                    <template #dropdown>
                                                        <el-dropdown-menu>
                                                            <el-dropdown-item @click="artifactsClick(i,'bz')"
                                                                              v-for="(i,k) in artifacts_map.b">
                                                                <span>{{ i }}</span>
                                                            </el-dropdown-item>
                                                        </el-dropdown-menu>
                                                    </template>
                                                </el-dropdown>
                                            </div>
                                            <div class="zp_artifacts_content_item_wrapper">
                                                <el-checkbox v-model="edit_data.artifacts.tg[1]"
                                                             size="small"></el-checkbox>
                                                <el-dropdown>
                                                        <span class="zp_artifacts_content_item_show_wrapper">
                                                            {{ edit_data.artifacts.tg[0] || '头' }}
                                                        </span>
                                                    <template #dropdown>
                                                        <el-dropdown-menu>
                                                            <el-dropdown-item @click="artifactsClick(i,'tg')"
                                                                              v-for="(i,k) in artifacts_map.g">
                                                                <span>{{ i }}</span>
                                                            </el-dropdown-item>
                                                        </el-dropdown-menu>
                                                    </template>
                                                </el-dropdown>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="zp_artifacts_more_wrapper">
                                    <div class="zp_more_item_wrapper zp_line_wrapper">
                                        <div class="zp_line_icon_wrapper"></div>
                                        <div class="zp_line_title_wrapper">
                                            <div class="zp_line_title_item_wrapper">当前</div>
                                            <div class="zp_line_title_item_wrapper">目标</div>
                                        </div>
                                    </div>
                                    <div class="zp_more_item_wrapper zp_line_wrapper">
                                        <div class="zp_line_icon_wrapper">生命</div>
                                        <div class="zp_line_value_wrapper">
                                            <div class="zp_line_value_item_wrapper">
                                                <input type="text" v-model="edit_data.info.sm[0]">
                                            </div>
                                            <div class="zp_line_value_item_wrapper">
                                                <input type="text" v-model="edit_data.info.sm[1]">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="zp_more_item_wrapper zp_line_wrapper">
                                        <div class="zp_line_icon_wrapper">攻击</div>
                                        <div class="zp_line_value_wrapper">
                                            <div class="zp_line_value_item_wrapper">
                                                <input type="text" v-model="edit_data.info.gj[0]">
                                            </div>
                                            <div class="zp_line_value_item_wrapper">
                                                <input type="text" v-model="edit_data.info.gj[1]">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="zp_more_item_wrapper zp_line_wrapper">
                                        <div class="zp_line_icon_wrapper">精通</div>
                                        <div class="zp_line_value_wrapper">
                                            <div class="zp_line_value_item_wrapper">
                                                <input type="text" v-model="edit_data.info.jt[0]">
                                            </div>
                                            <div class="zp_line_value_item_wrapper">
                                                <input type="text" v-model="edit_data.info.jt[1]">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="zp_more_item_wrapper zp_line_wrapper">
                                        <div class="zp_line_icon_wrapper">暴击</div>
                                        <div class="zp_line_value_wrapper">
                                            <div class="zp_line_value_item_wrapper">
                                                <input type="text" v-model="edit_data.info.bj[0]">
                                            </div>
                                            <div class="zp_line_value_item_wrapper">
                                                <input type="text" v-model="edit_data.info.bj[1]">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="zp_more_item_wrapper zp_line_wrapper">
                                        <div class="zp_line_icon_wrapper">暴伤</div>
                                        <div class="zp_line_value_wrapper">
                                            <div class="zp_line_value_item_wrapper">
                                                <input type="text" v-model="edit_data.info.bs[0]">
                                            </div>
                                            <div class="zp_line_value_item_wrapper">
                                                <input type="text" v-model="edit_data.info.bs[1]">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="zp_more_item_wrapper zp_line_wrapper">
                                        <div class="zp_line_icon_wrapper">充能</div>
                                        <div class="zp_line_value_wrapper">
                                            <div class="zp_line_value_item_wrapper">
                                                <input type="text" v-model="edit_data.info.cn[0]">
                                            </div>
                                            <div class="zp_line_value_item_wrapper">
                                                <input type="text" v-model="edit_data.info.cn[1]">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="role_button_wrapper">
                                <el-switch v-model="edit_data.computed"
                                           class="mx-1"
                                           style="--el-switch-off-color: #afa39a"
                                           width="60" inline-prompt active-text="计算"
                                           inactive-text="忽略"></el-switch>
                                <el-switch v-model="push_type"
                                           @change="pushTypeChange"
                                           class="mx-1"
                                           style="--el-switch-off-color: #afa39a"
                                           width="60" inline-prompt active-text="最前"
                                           inactive-text="最后"></el-switch>
                            </div>
                        </div>
                        <div class="choose_wrapper">
                            <div class="choose_role_box_wrapper">
                                <el-scrollbar>
                                    <div class="choose_role_wrapper">
                                        <div @click="chooseRole('')" class="choose_item_wrapper">
                                            <div class="choose_item_cover_wrapper zp_cover_wrapper">
                                                ?
                                            </div>
                                            <div class="choose_item_name_wrapper">无角色</div>
                                        </div>
                                        <template v-for="(ri,rk) in choose_search.roles">
                                            <div @click="chooseRole(rk)" v-if="rk.indexOf('预告') === -1" :key="rk"
                                                 class="choose_item_wrapper">
                                                <div class="choose_item_cover_wrapper zp_cover_wrapper">
                                                    <img :src="ri.icon" alt="">
                                                </div>
                                                <div class="choose_item_name_wrapper">{{ rk }}</div>
                                            </div>
                                        </template>
                                    </div>
                                </el-scrollbar>
                            </div>
                            <div class="choose_weapon_box_wrapper">
                                <el-scrollbar>
                                    <div class="choose_weapon_wrapper">
                                        <div @click="chooseWeapon('')" class="choose_item_wrapper">
                                            <div class="choose_item_cover_wrapper zp_cover_wrapper">
                                                ?
                                            </div>
                                            <div class="choose_item_name_wrapper">无武器</div>
                                        </div>
                                        <div @click="chooseWeapon(wk)" v-for="(wi,wk) in choose_search.weapons"
                                             :key="wk"
                                             class="choose_item_wrapper">
                                            <div class="choose_item_cover_wrapper zp_cover_wrapper">
                                                <img :src="wi.icon" alt="">
                                            </div>
                                            <div class="choose_item_name_wrapper">{{ wk }}</div>
                                        </div>
                                    </div>
                                </el-scrollbar>
                            </div>
                            <div class="choose_artifacts_box_wrapper">
                                <el-scrollbar>
                                    <div class="choose_artifacts_wrapper">
                                        <div @click="chooseArtifacts('','a')"
                                             @contextmenu.prevent="(e)=>{chooseArtifacts('','b',e)}"
                                             class="choose_item_wrapper">
                                            <div class="choose_item_cover_wrapper zp_cover_wrapper">
                                                ?
                                            </div>
                                            <div class="choose_item_name_wrapper">无圣遗物</div>
                                        </div>
                                        <div @click="chooseArtifacts(ak,'a')"
                                             @contextmenu.prevent="(e)=>{chooseArtifacts(ak,'b',e)}"
                                             v-for="(ai,ak) in choose_search.artifacts"
                                             :key="ak"
                                             class="choose_item_wrapper">
                                            <div class="choose_item_cover_wrapper zp_cover_wrapper">
                                                <img :src="ai.icon" alt="">
                                            </div>
                                            <div class="choose_item_name_wrapper">{{ ak }}</div>
                                        </div>
                                    </div>
                                </el-scrollbar>
                            </div>
                            <div class="search_input_wrapper">
                                <el-input v-model="edit_hold.search" placeholder="搜索"></el-input>
                            </div>
                        </div>
                    </div>
                </div>
                <template #header>
                    <div class="dialog_header_wrapper">
                        {{ edit_active === -1 ? '添加' : '编辑' }}角色
                    </div>
                </template>
                <template #footer>
                    <div>
                        <el-button @click="edit_show = false" link>关闭</el-button>
                        <el-button @click="editConfirmClick()" color="#545454" dark>确认</el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </el-config-provider>
</div>
<script>
  const {createApp, onMounted, ref, nextTick, computed} = Vue
  const {ElLoading, ElMessage} = ElementPlus

  window.$message = () => {
    ElMessage.closeAll()
    return ElMessage
  }
  let loading = null
  window.$loading = () => {
    return {
      open: () => {
        loading = ElLoading.service({
          lock: true,
          text: '加载中...',
        })
      },
      close: () => {
        loading.close()
      },
    }
  }

  const App = {
    setup() {
      const button_config = {
        autoInsertSpace: true,
      }

      const week_day = ref('')
      const checkWeekActive = () => {
        let now = new Date();
        let currentHour = now.getHours();
        if (currentHour < 4) {
          now.setDate(now.getDate() - 1);
        }
        let dayOfWeek = now.getDay();
        switch (dayOfWeek) {
          case 0:
            week_day.value = '周日'
            break
          case 1:
          case 4:
            week_day.value = '周一/周四/周日'
            break
          case 2:
          case 5:
            week_day.value = '周二/周五/周日'
            break
          case 3:
          case 6:
            week_day.value = '周三/周六/周日'
            break
        }
      }

      const backpack_value_show = ref(true)
      const checkBackpackValueShow = () => {
        const backpack_value_show_str = localStorage.getItem('BACKPACK_VALUE_SHOW')
        if (!!backpack_value_show_str) {
          backpack_value_show.value = backpack_value_show_str === 'true'
        } else {
          backpack_value_show.value = true
        }
        needRunner()
      }
      const checkBackpackValueChange = () => {
        localStorage.setItem('BACKPACK_VALUE_SHOW', String(backpack_value_show.value))
        needRunner()
      }

      const order_list_show = ref(true)
      const value_info_show = ref(true)
      const checkValueInfoShow = () => {
        const value_info_show_str = localStorage.getItem('VALUE_INFO_SHOW')
        if (!!value_info_show_str) {
          value_info_show.value = value_info_show_str === 'true'
        } else {
          value_info_show.value = true
        }
      }
      const valueInfoShowChange = () => {
        localStorage.setItem('VALUE_INFO_SHOW', String(value_info_show.value))
      }

      const artifacts_map = {
        s: ['攻击', '防御', '生命', '充能', '精通'],
        b: ['攻击', '防御', '生命', '特攻', '物攻', '精通'],
        g: ['攻击', '防御', '生命', '精通', '暴击', '暴伤', '治疗'],
      }

      const artifactsClick = (item, type) => {
        edit_data.value.artifacts[type][0] = item
      }

      const breakChange = (type, index) => {
        const value = edit_data.value[type].break[index]
        edit_data.value[type].break[index] = !value
      }

      const breakShow = (type, index) => {
        const value = edit_data.value[type].break[index]
        const level = edit_data.value[type].level[index]
        const level_arr = [20, 40, 50, 60, 70, 80]
        if (level_arr.indexOf(level) !== -1) {
          if (index === 0) {
            return `${level}${value ? '已' : '未'}突破`
          } else {
            return `${level}${value ? '需' : '不'}突破`
          }
        }
        return '无需处理'
      }

      const choose_search = computed(() => {
        if (!!edit_hold.value.search) {
          let roles = {}
          let weapons = {}
          let artifacts = {}
          for (let i in data_map.value.roles) {
            if (i.indexOf(edit_hold.value.search) !== -1) {
              roles[i] = data_map.value.roles[i]
            }
          }
          for (let i in data_map.value.weapons) {
            if (i.indexOf(edit_hold.value.search) !== -1) {
              weapons[i] = data_map.value.weapons[i]
            }
          }
          for (let i in data_map.value.artifacts) {
            if (i.indexOf(edit_hold.value.search) !== -1) {
              artifacts[i] = data_map.value.artifacts[i]
            }
          }
          return {
            roles: roles,
            weapons: weapons,
            artifacts: artifacts
          }
        } else {
          return data_map.value
        }
      })

      const editConfirmClick = () => {
        if (edit_active.value === -1) {
          if (!!push_type.value) {
            player.value[player_active.value].role.unshift(JSON.parse(JSON.stringify(edit_data.value)))
          } else {
            player.value[player_active.value].role.push(JSON.parse(JSON.stringify(edit_data.value)))
          }
        } else {
          player.value[player_active.value].role[edit_active.value] = JSON.parse(JSON.stringify(edit_data.value))
        }
        edit_active.value = -1
        edit_data.value = JSON.parse(JSON.stringify(edit_data_default))
        edit_show.value = false
        savePlayer()
      }

      const edit_show = ref(false)
      const edit_active = ref(-1)
      const edit_data_default = {
        computed: true,
        role: {
          name: '',
          count: [0, 0],
          level: [1, 90],
          break: [true, true],
          skill: {q: [1, 7], e: [1, 7], a: [1, 7]}
        },
        weapon: {name: '', count: [1, 1], level: [1, 90], break: [true, true]},
        artifacts: {
          a: '',
          b: '',
          sl: ['', false],
          bz: ['', false],
          tg: ['', false]
        },
        info: {
          sm: [0, 0],
          gj: [0, 0],
          jt: [0, 0],
          bj: [0, 0],
          bs: [0, 0],
          cn: [0, 0]
        }
      }
      const edit_data = ref(JSON.parse(JSON.stringify(edit_data_default)))

      const edit_hold_default = {
        search: '',
      }
      const edit_hold = ref(JSON.parse(JSON.stringify(edit_hold_default)))

      const chooseRole = (name) => {
        if (edit_data.value.role.name !== name) {
          edit_data.value.role.name = name
          checkEdit()
        }
      }
      const chooseWeapon = (name) => {
        if (edit_data.value.weapon.name !== name) {
          edit_data.value.weapon.name = name
          checkEdit()
        }
      }
      const chooseArtifacts = (name, type, e = null) => {
        if (!!e) e.preventDefault()
        const artifacts_active = edit_data.value.artifacts[type]
        if (artifacts_active !== name) {
          edit_data.value.artifacts[type] = name
          checkEdit()
        }
      }

      const checkEdit = () => {
        edit_hold.value = JSON.parse(JSON.stringify(edit_hold_default))
      }

      const createRole = () => {
        edit_active.value = -1
        edit_data.value = JSON.parse(JSON.stringify(edit_data_default))
        checkEdit()
        edit_show.value = true
      }
      const updateRole = (key) => {
        edit_active.value = key
        edit_data.value = JSON.parse(JSON.stringify({
          ...edit_data_default,
          ...player.value[player_active.value].role[key],
        }))
        checkEdit()
        edit_show.value = true
      }

      const dialog_option_default = {
        type: 'info',
        title: '确认',
        content: '',
        width: 300,
        input: null,
        confirm_text: '',
        cancel_text: '',
        confirm_close: true,
        cancel_close: true,
      }
      const dialog_show = ref(false)
      const dialog_option = ref({
        ...JSON.parse(JSON.stringify(dialog_option_default)),
        confirm: () => {
        },
        cancel: () => {
        }
      })
      const dialogCancelClick = () => {
        dialog_option.value.cancel()
        if (!!dialog_option.value.cancel_close) dialog_show.value = false
      }
      const dialogConfirmClick = () => {
        dialog_option.value.confirm({
          input: dialog_option.value.input,
        })
        if (!!dialog_option.value.confirm_close) dialog_show.value = false
      }
      const dialogOpen = (option = {}) => {
        if ('input' in option) {
          if (option.type === 'number') {
            option.input = Number(option.input)
          } else {
            option.input = String(option.input)
          }
        }
        dialog_option.value = {
          ...JSON.parse(JSON.stringify(dialog_option_default)),
          confirm: () => {
          },
          cancel: () => {
          },
          ...option
        }
        dialog_show.value = true
      }

      const tab_active = ref('')
      const player_active = ref(0)
      const player = ref([])
      const getPlayer = () => {
        const player_str = localStorage.getItem('PLAYER')
        const player_active_str = localStorage.getItem('PLAYER_ACTIVE')
        let p = []
        if (!!player_str) {
          p = JSON.parse(player_str)
        }
        if (p.length === 0) {
          p = [{
            name: '新角色',
            role: [],
            backpack: JSON.parse(JSON.stringify(backpack_data_default)),
          }]
        }
        player.value = p
        let pa = 0
        if (!!player_active_str) {
          if (Number(player_active_str) <= player.value.length - 1) {
            pa = Number(player_active_str)
          }
        }
        player_active.value = pa
        savePlayer()
        tabActiveCheck()
        checkValueInfoShow()
      }

      const tabActiveCheck = () => {
        const tab_active_str = localStorage.getItem('TAB_ACTIVE')
        if (!!tab_active_str) {
          tab_active.value = tab_active_str
        } else {
          tab_active.value = 'zp'
        }
        tabChange(tab_active.value)
      }

      const push_type = ref(true)
      const pushTypeCheck = (e) => {
        const push_type_str = localStorage.getItem('PUSH_TYPE')
        if (!!push_type_str) {
          push_type.value = push_type_str === 'true'
        } else {
          push_type.value = true
        }
      }
      const pushTypeChange = (e) => {
        localStorage.setItem('PUSH_TYPE', e ? 'true' : 'false')
      }

      const tabChange = (e) => {
        localStorage.setItem('TAB_ACTIVE', e)
        tabStatusCheck()
      }

      const tabStatusCheck = () => {
        switch (tab_active.value) {
          case 'zp':
            break
          case 'bb':
          case 'xq':
          case 'jh':
            backpackRunner()
            break
          case 'js':
            break
        }
      }

      const backpackRunner = () => {
        const player_backpack = JSON.parse(JSON.stringify({
          ...backpack_data_default,
          ...player.value[player_active.value].backpack
        }))
        const item_map = {
          role_list: roleBackpackRunner(),
          weapon_list: weaponBackpackRunner(),
        }
        let list = {}
        for (let i in item_map) {
          for (let ii in item_map[i]) {
            if (!(item_map[i][ii].name in list)) {
              list[item_map[i][ii].name] = {
                name: item_map[i][ii].name,
                need: [],
                count: 0
              }
            }
            list[item_map[i][ii].name].count = list[item_map[i][ii].name].count + item_map[i][ii].count
            for (let iii in item_map[i][ii].need) {
              let need_name = item_map[i][ii].need[iii]
              if (list[item_map[i][ii].name].need.indexOf(need_name) === -1) {
                list[item_map[i][ii].name].need.push(need_name)
              }
            }
          }
        }
        let item_need = []
        for (let i in list) {
          if (list[i].count > 0) {
            item_need.push(list[i])
          }
        }
        player_backpack.list = item_need

        const artifacts_list = artifactsBackpackRunner()
        let artifacts_need = []
        for (let i in artifacts_list) {
          artifacts_need.push(artifacts_list[i])
        }
        player_backpack.artifacts = artifacts_need

        for (let i in player_backpack.backpack) {
          if (player_backpack.backpack[i] === 0) {
            delete player_backpack.backpack[i]
          }
        }
        if (!player_backpack.backpack) {
          player_backpack.backpack = {}
        }
        for (let i in item_need) {
          if (special_type_arr.indexOf(item_need[i].name) === -1) {
            if (!(item_need[i].name in player_backpack.backpack)) {
              player_backpack.backpack[item_need[i].name] = 0
            }
          }
        }
        if (!('纠缠之缘' in player_backpack.backpack)) {
          player_backpack.backpack['纠缠之缘'] = 0
        }

        player.value[player_active.value].backpack = player_backpack

        if (tab_active.value === 'xq'
          || tab_active.value === 'jh') {
          checkBackpackValueShow()
        }
      }

      const level_map = {
        role: [
          [1, 20, 6],
          [20, 40, 29],
          [40, 50, 29],
          [50, 60, 43],
          [60, 70, 60],
          [70, 80, 81],
          [80, 90, 172],
        ],
        break: [20, 40, 50, 60, 70, 80],
        weapon: {
          t3: [
            [1, 20, 5],
            [20, 40, 27],
            [40, 50, 27],
            [50, 60, 40],
            [60, 70, 57],
            [70, 80, 77],
            [80, 90, 163],
          ],
          t4: [
            [1, 20, 8],
            [20, 40, 41],
            [40, 50, 41],
            [50, 60, 61],
            [60, 70, 86],
            [70, 80, 116],
            [80, 90, 247],
          ],
          t5: [
            [1, 20, 12],
            [20, 40, 62],
            [40, 50, 62],
            [50, 60, 92],
            [60, 70, 129],
            [70, 80, 175],
            [80, 90, 371],
          ]
        },
      }
      const special_type_arr = ['祈愿/角色', '祈愿/武器']
      const calculateRoleLevel = (role_item) => {
        let start_level = Math.min(...role_item.level)
        let end_level = Math.max(...role_item.level)
        let level_count = 0
        let break_arr = []
        for (let i = start_level; i <= end_level; i++) {
          let break_index = level_map.break.indexOf(i)
          if (break_index !== -1) {
            if (start_level === i && role_item.break[0]) {
              continue
            }
            if (end_level === i && role_item.break[1]) {
              continue
            }
            break_arr.push(break_index)
          }
        }
        for (let i = start_level; i <= end_level; i++) {
          if (i === start_level) {
            continue
          }
          for (let j in level_map.role) {
            if (level_map.role[j][0] <= i && level_map.role[j][1] >= i) {
              level_count = level_count + level_map.role[j][2] / (level_map.role[j][1] - level_map.role[j][0])
              break
            }
          }
        }
        level_count = Math.ceil(level_count)
        return {level_count, break_arr};
      }
      const calculateWeaponLevel = (weapon_item, weapon_type) => {
        let start_level = Math.min(...weapon_item.level)
        let end_level = Math.max(...weapon_item.level)
        let level_count = 0
        let break_arr = []
        for (let i = start_level; i <= end_level; i++) {
          let break_index = level_map.break.indexOf(i)
          if (break_index !== -1) {
            if (start_level === i && weapon_item.break[0]) {
              continue
            }
            if (end_level === i && weapon_item.break[1]) {
              continue
            }
            break_arr.push(break_index)
          }
        }
        let weapon_up_key = 't5'
        switch (weapon_type) {
          case '五星':
            weapon_up_key = 't5'
            break;
          case '四星':
            weapon_up_key = 't4'
            break;
          case '三星':
            weapon_up_key = 't3'
            break;
        }
        for (let i = start_level; i <= end_level; i++) {
          if (i === start_level) {
            continue
          }
          let weapon_key = level_map.weapon[weapon_up_key]
          for (let j in weapon_key) {
            if (weapon_key[j][0] <= i && weapon_key[j][1] >= i) {
              level_count = level_count + weapon_key[j][2] / (weapon_key[j][1] - weapon_key[j][0])
              break
            }
          }
        }
        level_count = Math.ceil(level_count)
        return {level_count, break_arr};
      }
      const roleBackpackRunner = () => {
        let list = {}
        const role_list = player.value[player_active.value].role
        let gold_count = 0
        let gold_arr = []
        let level_count = 0
        let level_arr = []
        for (let i in role_list) {
          let role_item = role_list[i].role
          if (!!role_item.name && !!role_list[i].computed) {
            let role_data = data_map.value.roles[role_item.name]
            // 判断五星命座
            if (role_data.ext.level === '五星') {
              if (role_item.count[0] !== role_item.count[1]) {
                let gold_item = Math.max(...role_item.count) - Math.min(...role_item.count)
                gold_count = gold_count + gold_item
                if (gold_arr.indexOf(role_item.name) === -1) {
                  gold_arr.push(role_item.name)
                }
              }
            }
            // 判断角色等级需求
            if (role_item.level[0] !== role_item.level[1]) {
              let level_data = calculateRoleLevel(role_item)
              level_count = level_count + level_data.level_count
              if (level_arr.indexOf(role_item.name) === -1) {
                level_arr.push(role_item.name)
              }
              if (level_data.break_arr.length > 0) {
                for (let ii in level_data.break_arr) {
                  if (role_data.up.level.length) {
                    let break_data = role_data.up.level[level_data.break_arr[ii]]
                    for (let iii in break_data) {
                      if (!(break_data[iii].name in list)) {
                        list[break_data[iii].name] = {
                          name: break_data[iii].name,
                          need: [],
                          count: 0
                        }
                      }
                      let item_count = Number(break_data[iii].count)
                      if (break_data[iii].name === '摩拉') {
                        item_count = item_count / 10000
                      }
                      list[break_data[iii].name].count = list[break_data[iii].name].count + item_count
                      if (list[break_data[iii].name].need.indexOf(role_item.name) === -1) {
                        list[break_data[iii].name].need.push(role_item.name)
                      }
                    }
                  }
                }
              }
            }
            // 判断角色技能需求
            for (let ii in role_item.skill) {
              if (role_item.skill[ii][0] !== role_item.skill[ii][1]) {
                let start_level = Math.min(...role_item.skill[ii])
                let end_level = Math.max(...role_item.skill[ii])
                for (let iii = start_level + 1; iii <= end_level; iii++) {
                  let break_data = role_data.up.skill[iii - 2]
                  for (let iiii in break_data) {
                    if (!(break_data[iiii].name in list)) {
                      list[break_data[iiii].name] = {
                        name: break_data[iiii].name,
                        need: [],
                        count: 0
                      }
                    }
                    let item_count = Number(break_data[iiii].count)
                    if (break_data[iiii].name === '摩拉') {
                      item_count = item_count / 10000
                    }
                    list[break_data[iiii].name].count = list[break_data[iiii].name].count + item_count
                    if (list[break_data[iiii].name].need.indexOf(role_item.name) === -1) {
                      list[break_data[iiii].name].need.push(role_item.name)
                    }
                  }
                }
              }
            }
          }
        }
        list['祈愿/角色'] = {
          name: '祈愿/角色',
          need: gold_arr,
          count: gold_count
        }
        list['大英雄的经验'] = {
          name: '大英雄的经验',
          need: level_arr,
          count: level_count
        }
        return list
      }

      const weaponBackpackRunner = () => {
        let list = {}
        const role_list = player.value[player_active.value].role
        let gold_count = 0
        let gold_arr = []
        let level_count = 0
        let level_arr = []
        for (let i in role_list) {
          let weapon_item = role_list[i].weapon
          if (!!weapon_item.name && !!role_list[i].computed) {
            let weapon_data = data_map.value.weapons[weapon_item.name]
            // 判断五星精炼
            if (weapon_data.ext.level === '五星') {
              if (weapon_item.count[0] !== weapon_item.count[1]) {
                let gold_item = Math.max(...weapon_item.count) - Math.min(...weapon_item.count)
                gold_count = gold_count + gold_item
                if (gold_arr.indexOf(weapon_item.name) === -1) {
                  gold_arr.push(weapon_item.name)
                }
              }
            }

            // 判断武器等级需求
            if (weapon_item.level[0] !== weapon_item.level[1]) {
              let level_data = calculateWeaponLevel(weapon_item, weapon_data.ext.level)
              level_count = level_count + level_data.level_count
              if (level_arr.indexOf(weapon_item.name) === -1) {
                level_arr.push(weapon_item.name)
              }
              if (level_data.break_arr.length > 0) {
                for (let ii in level_data.break_arr) {
                  let break_data = weapon_data.level[level_data.break_arr[ii]]
                  for (let iii in break_data) {
                    if (!(break_data[iii].name in list)) {
                      list[break_data[iii].name] = {
                        name: break_data[iii].name,
                        need: [],
                        count: 0
                      }
                    }
                    let item_count = Number(break_data[iii].count)
                    if (break_data[iii].name === '摩拉') {
                      item_count = item_count / 10000
                    }
                    list[break_data[iii].name].count = list[break_data[iii].name].count + item_count
                    if (list[break_data[iii].name].need.indexOf(weapon_item.name) === -1) {
                      list[break_data[iii].name].need.push(weapon_item.name)
                    }
                  }
                }
              }
            }
          }
        }
        list['祈愿/武器'] = {
          name: '祈愿/武器',
          need: gold_arr,
          count: gold_count
        }
        list['精锻用魔矿'] = {
          name: '精锻用魔矿',
          need: level_arr,
          count: level_count
        }
        return list
      }
      const artifacts_type_arr = ['bz', 'sl', 'tg']
      const artifactsBackpackRunner = () => {
        let list = {}
        const role_list = player.value[player_active.value].role
        for (let i in role_list) {
          if (role_list[i].computed) {
            let artifacts_item = role_list[i].artifacts
            let role_name = role_list[i].role.name
            // 判断圣遗物主词条
            if (!!artifacts_item.a || !!artifacts_item.b) {
              let tz_push = true
              for (let ii in artifacts_type_arr) {
                if (!!artifacts_item[artifacts_type_arr[ii]][0] && !artifacts_item[artifacts_type_arr[ii]][1]) {
                  if (!!artifacts_item.a) {
                    if (!(`${artifacts_item.a}_${artifacts_type_arr[ii]}` in list)) {
                      list[`${artifacts_item.a}_${artifacts_type_arr[ii]}`] = {
                        name: artifacts_item.a,
                        type: artifacts_type_arr[ii],
                        need: [],
                        count: 0
                      }
                    }
                    tz_push = false
                    list[`${artifacts_item.a}_${artifacts_type_arr[ii]}`].count++
                    if (list[`${artifacts_item.a}_${artifacts_type_arr[ii]}`].need.indexOf(role_name) === -1) {
                      list[`${artifacts_item.a}_${artifacts_type_arr[ii]}`].need.push(role_name)
                    }
                  }
                  if (!!artifacts_item.b && artifacts_item.a !== artifacts_item.b) {
                    if (!(`${artifacts_item.b}_${artifacts_type_arr[ii]}` in list)) {
                      list[`${artifacts_item.b}_${artifacts_type_arr[ii]}`] = {
                        name: artifacts_item.b,
                        type: artifacts_type_arr[ii],
                        need: [],
                        count: 0
                      }
                    }
                    tz_push = false
                    list[`${artifacts_item.b}_${artifacts_type_arr[ii]}`].count++
                    if (list[`${artifacts_item.b}_${artifacts_type_arr[ii]}`].need.indexOf(role_name) === -1) {
                      list[`${artifacts_item.b}_${artifacts_type_arr[ii]}`].need.push(role_name)
                    }
                  }
                }
              }
              // 判断圣遗物副词条
              if (!!tz_push) {
                let value_item = role_list[i].info
                for (let ii in value_item) {
                  if (Number(value_item[ii][0]) < Number(value_item[ii][1])) {
                    if (!!artifacts_item.a) {
                      if (!(`${artifacts_item.a}_tz` in list)) {
                        list[`${artifacts_item.a}_tz`] = {
                          name: artifacts_item.a,
                          type: 'tz',
                          need: [],
                          count: 0
                        }
                      }
                      list[`${artifacts_item.a}_tz`].count++
                      if (list[`${artifacts_item.a}_tz`].need.indexOf(role_name) === -1) {
                        list[`${artifacts_item.a}_tz`].need.push(role_name)
                      }
                    }
                    if (!!artifacts_item.b && artifacts_item.a !== artifacts_item.b) {
                      if (!(`${artifacts_item.b}_tz` in list)) {
                        list[`${artifacts_item.b}_tz`] = {
                          name: artifacts_item.b,
                          type: 'tz',
                          need: [],
                          count: 0
                        }
                      }
                      list[`${artifacts_item.b}_tz`].count++
                      if (list[`${artifacts_item.b}_tz`].need.indexOf(role_name) === -1) {
                        list[`${artifacts_item.b}_tz`].need.push(role_name)
                      }
                    }
                    break
                  }
                }
              }
            }
          }
        }
        let l = {}
        for (let i in list) {
          if (!(list[i].name in l)) {
            l[list[i].name] = {
              name: list[i].name,
              bz: {
                need: [],
                count: 0
              },
              sl: {
                need: [],
                count: 0
              },
              tg: {
                need: [],
                count: 0
              },
              tz: {
                need: [],
                count: 0
              },
            }
          }
          l[list[i].name][list[i].type].count = l[list[i].name][list[i].type].count + list[i].count
          for (let ii in list[i].need) {
            if (l[list[i].name][list[i].type].need.indexOf(list[i].need[ii]) === -1) {
              l[list[i].name][list[i].type].need.push(list[i].need[ii])
            }
          }
        }
        return l
      }

      const need_list = ref([])
      const needRunner = () => {
        let list = []
        const backpack_list = player.value[player_active.value].backpack.list
        const backpack_map = player.value[player_active.value].backpack.backpack
        let gold_count = 0
        let gold_arr = []
        for (let i in backpack_list) {
          if (special_type_arr.indexOf(backpack_list[i].name) === -1) {
            let id = 0
            if (pick_item_id_arr.indexOf(backpack_list[i].name) === -1) {
              if (backpack_list[i].name in data_map.value.items) {
                id = data_map.value.items[backpack_list[i].name].content_id
              }
            }
            if (backpack_value_show.value) {
              if (backpack_list[i].count - backpack_map[backpack_list[i].name] > 0) {
                list.push({
                  name: backpack_list[i].name,
                  need: backpack_list[i].need,
                  count: backpack_list[i].count - backpack_map[backpack_list[i].name],
                  id,
                })
              }
            } else {
              list.push({
                name: backpack_list[i].name,
                need: backpack_list[i].need,
                count: backpack_list[i].count,
                id,
              })
            }
          } else {
            gold_arr = [...gold_arr, ...backpack_list[i].need]
            if (backpack_list[i].name === '祈愿/角色') {
              gold_count = gold_count + (backpack_list[i].count * player.value[player_active.value].backpack.role_average)
            } else if (backpack_list[i].name === '祈愿/武器') {
              gold_count = gold_count + (backpack_list[i].count * player.value[player_active.value].backpack.weapon_average)
            }
          }
        }

        if (gold_count - backpack_map['纠缠之缘'] > 0) {
          if (backpack_value_show.value) {
            list.push({
              name: '纠缠之缘',
              need: gold_arr,
              count: gold_count - backpack_map['纠缠之缘'],
              id: -1,
            })
          } else {
            list.push({
              name: '纠缠之缘',
              need: gold_arr,
              count: gold_count,
              id: -1,
            })
          }
        }

        list = list.sort((a, b) => a.id - b.id)

        let order_map = {
          '其他': [], // 其他
          '怪物掉落': [], // 怪物掉落
          '周本': [], // 周本
          'BOSS': [], // 地图BOSS
          '天赋材料': [], // 天赋材料
          '武器材料': [], // 武器材料
          '特产': [], // 特产
          '钻石': [], // 钻石
        }
        for (let i in list) {
          if (['智识之冕', '纠缠之缘'].indexOf(list[i].name) === -1) {
            if (list[i].name in data_map.value.items) {
              let info = data_map.value.items[list[i].name]
              let type = info.info.type
              switch (type) {
                case  '角色与武器培养素材':
                case  '武器培养素材':
                  order_map['怪物掉落'].push(list[i])
                  break
                case  '天赋培养素材':
                  order_map['周本'].push(list[i])
                  break
                case  '角色培养素材':
                  order_map['BOSS'].push(list[i])
                  break
                case  '角色突破素材':
                  order_map['钻石'].push(list[i])
                  break
                case  '角色天赋素材':
                  order_map['天赋材料'].push(list[i])
                  break
                case  '武器突破素材':
                  order_map['武器材料'].push(list[i])
                  break
                case  '特产':
                  order_map['特产'].push(list[i])
                  break
                default:
                  // consoleLog(type, list[i].name)
                  order_map['其他'].push(list[i])
                  break
              }
            }
          } else {
            order_map['其他'].push(list[i])
          }
        }

        need_list.value = [
          ...order_map['其他'],
          ...order_map['怪物掉落'],
          ...order_map['周本'],
          ...order_map['BOSS'],
          ...order_map['钻石'],
          ...order_map['天赋材料'],
          ...order_map['武器材料'],
          ...order_map['特产'],
        ]
        if (tab_active.value === 'jh') {
          planRunner()
        }
      }
      const plan_default_map = {
        '角色天赋素材': {
          '周一/周四/周日': [],
          '周二/周五/周日': [],
          '周三/周六/周日': [],
        },
        '武器突破素材': {
          '周一/周四/周日': [],
          '周二/周五/周日': [],
          '周三/周六/周日': [],
        },
        '角色突破素材': [],
        '角色培养素材': [],
        '武器培养素材': [],
        '天赋培养素材': [],
        '角色与武器培养素材': [],
        '特产': [],
        '其他材料': [],
        '圣遗物': [],
      }
      const plan_list = ref(false)
      const planRunner = () => {
        let list = JSON.parse(JSON.stringify(plan_default_map))
        let need = need_list.value
        for (let i in need) {
          if (['智识之冕', '纠缠之缘'].indexOf(need[i].name) === -1) {
            if (need[i].name in data_map.value.items) {
              let info = data_map.value.items[need[i].name]
              let video = ''
              if ('video' in info.info) {
                if (!!info.info.video) {
                  video = info.info.video
                }
              }
              let type = info.info.type
              switch (type) {
                case  '角色天赋素材':
                case  '武器突破素材':
                  list[type][data_map.value.items[need[i].name].info.time].push({
                    ...need[i],
                    video
                  })
                  break
                case  '天赋培养素材':
                case  '角色与武器培养素材':
                case  '武器培养素材':
                case  '角色突破素材':
                case  '角色培养素材':
                case  '特产':
                  list[type].push({
                    ...need[i],
                    video
                  })
                  break
                case  '角色经验素材':
                case  '武器强化素材':
                case  '其他':
                  list['其他材料'].push({
                    ...need[i],
                    video
                  })
                  break
                // default:
                //   consoleLog(data_map.value.items[need[i].name])
              }
            }
          } else {
            list['其他材料'].push({
              ...need[i],
              video: ''
            })
          }
        }
        list['圣遗物'] = player.value[player_active.value].backpack.artifacts
        plan_list.value = list
      }

      const consoleLog = (...e) => {
        console.log(...e)
      }

      const savePlayer = () => {
        localStorage.setItem('PLAYER', JSON.stringify(player.value))
        localStorage.setItem('PLAYER_ACTIVE', String(player_active.value))
      }

      const backpack_data_default = {
        role_average: 80,
        weapon_average: 90,
        list: [],
        artifacts: [],
        backpack: false,
      }
      const createPlayer = () => {
        player.value.unshift({
          name: '新角色',
          role: [],
          backpack: JSON.parse(JSON.stringify(backpack_data_default)),
        });
        player_active.value = 0
        savePlayer()
      }

      const playerActive = (key) => {
        if (player_active.value !== key) {
          player_active.value = key
          savePlayer()
        }
      }

      const deletePlayer = (key) => {
        dialogOpen({
          title: '删除角色',
          content: '是否确认删除角色？',
          cancel_text: '取消',
          confirm: () => {
            if (key < player_active.value) {
              player_active.value = player_active.value - 1
            }
            if (key >= player.value.length - 1) {
              player_active.value = 0
            }
            player.value.splice(key, 1)
            if (player.value.length === 0) {
              createPlayer()
            } else {
              savePlayer()
            }
          }
        })
      }

      const Base64Encode = (input) => {
        const encoder = new TextEncoder();
        const utf8Bytes = encoder.encode(input);
        return btoa(String.fromCharCode(...utf8Bytes));
      }

      const Base64Decode = (encoded) => {
        try {
          if (typeof atob !== 'function') {
            globalThis.atob = (b64Encoded) => Buffer.from(b64Encoded, 'base64').toString('binary');
          }
          const binaryString = atob(encoded);
          const decoder = new TextDecoder();
          return decoder.decode(new Uint8Array(binaryString.split('').map(c => c.charCodeAt(0))));
        } catch (e) {
          window.$message().error('字符串解析失败')
        }
      }
      const share_break = '---------------------------------------TOYS'
      const sharePlayer = (info) => {
        dialogOpen({
          type: 'textarea',
          title: '分享角色',
          input: `${info.name} 角色数量：${info.role.length}个
${APP_NAME} 版本：${APP_VERSION}
链接：${window.location.href}
${share_break}${Base64Encode(JSON.stringify(info))}`,
          width: 700,
          cancel_text: '关闭',
          confirm_text: '复制',
          confirm_close: false,
          confirm: ({input}) => {
            copyToClipboard(input)
          }
        })
      }

      async function copyToClipboard(text) {
        try {
          await navigator.clipboard.writeText(text);
          window.$message().success('已复制到剪切板')
        } catch (err) {
          var textarea = document.createElement('textarea');
          textarea.style.position = 'absolute';
          textarea.style.top = 0;
          textarea.style.left = 0;
          textarea.style.width = '1px';
          textarea.style.height = '1px';
          textarea.style.padding = 0;
          textarea.style.border = 'none';
          textarea.style.outline = 'none';
          textarea.style.boxShadow = 'none';
          textarea.style.background = 'transparent';
          document.body.appendChild(textarea);
          textarea.value = text;
          textarea.select();
          try {
            var successful = document.execCommand('copy');
            if (successful) {
              window.$message().success('已复制到剪切板')
            } else {
              window.$message().error('浏览器不支持复制')
            }
          } catch (err) {
            window.$message().error('浏览器不支持复制')
          }
          document.body.removeChild(textarea);
        }
      }

      const importPlayer = () => {
        dialogOpen({
          type: 'textarea',
          title: '导入角色',
          content: '请输入分享的字符串',
          width: 700,
          cancel_text: '取消',
          confirm: ({input}) => {
            if (input.indexOf(share_break) !== -1) {
              let value = input.split(share_break)[1]
              const info = Base64Decode(value)
              if (!info) {
                window.$message().error('分享字符串无效')
              } else {
                player.value.unshift(JSON.parse(info));
                player_active.value = 0
                savePlayer()
              }
            } else {
              window.$message().error('分享字符串无效')
            }
          }
        })
      }

      const editPlayer = (info, key) => {
        dialogOpen({
          type: 'text',
          title: '编辑角色',
          content: '请输入角色名称',
          width: 400,
          input: info.name,
          cancel_text: '取消',
          confirm: ({input}) => {
            player.value[key].name = input
            savePlayer()
          }
        })
      }

      const data_map = ref({
        artifacts: {},
        items: {},
        roles: {},
        weapons: {},
      })

      const getDataJSON = async () => {
        let response
        response = await axios.get('./assets/data/artifacts.json')
        data.artifacts = response.data
        response = await axios.get('./assets/data/items.json')
        data.items = response.data
        response = await axios.get('./assets/data/roles.json')
        data.roles = response.data
        response = await axios.get('./assets/data/weapons.json')
        data.weapons = response.data

        for (let i in data) {
          for (let ii in data[i]) {
            let title = data[i][ii].title
            data_map.value[i][title] = data[i][ii]
          }
        }

        getPlayer()
        checkWeekActive()
        pushTypeCheck()
      }

      const init = async () => {
        await getDataJSON()
      }

      const percentageGet = (number) => {
        if (number[0] === 0 || number[1] === 0) return 0
        return Math.min(
          100,
          Math.ceil(
            (Math.min(...number) / Math.max(...number)) * 100
          )
        )
      }
      const pick_item_id_arr = ['摩拉']
      const backpack_show = computed(() => {
        const backpack_list = player.value[player_active.value].backpack.list
        let list = []
        for (let i in backpack_list) {
          if (special_type_arr.indexOf(backpack_list[i].name) === -1) {
            let id = 0
            if (pick_item_id_arr.indexOf(backpack_list[i].name) === -1) {
              if (backpack_list[i].name in data_map.value.items) {
                id = data_map.value.items[backpack_list[i].name].content_id
              }
            }
            list.push({
              ...backpack_list[i],
              id,
            })
          }
        }
        list = list.sort((a, b) => a.id - b.id)
        let order_map = {
          '其他': [], // 其他
          '怪物掉落': [], // 怪物掉落
          '周本': [], // 周本
          'BOSS': [], // 地图BOSS
          '天赋材料': [], // 天赋材料
          '武器材料': [], // 武器材料
          '特产': [], // 特产
          '钻石': [], // 钻石
        }
        for (let i in list) {
          if (['智识之冕', '纠缠之缘'].indexOf(list[i].name) === -1) {
            if (list[i].name in data_map.value.items) {
              let info = data_map.value.items[list[i].name]
              let type = info.info.type
              switch (type) {
                case  '角色与武器培养素材':
                case  '武器培养素材':
                  order_map['怪物掉落'].push(list[i])
                  break
                case  '天赋培养素材':
                  order_map['周本'].push(list[i])
                  break
                case  '角色培养素材':
                  order_map['BOSS'].push(list[i])
                  break
                case  '角色突破素材':
                  order_map['钻石'].push(list[i])
                  break
                case  '角色天赋素材':
                  order_map['天赋材料'].push(list[i])
                  break
                case  '武器突破素材':
                  order_map['武器材料'].push(list[i])
                  break
                case  '特产':
                  order_map['特产'].push(list[i])
                  break
                default:
                  // consoleLog(type, list[i].name)
                  order_map['其他'].push(list[i])
                  break
              }
            }
          } else {
            order_map['其他'].push(list[i])
          }
        }
        return [
          ...order_map['其他'],
          ...order_map['怪物掉落'],
          ...order_map['周本'],
          ...order_map['BOSS'],
          ...order_map['钻石'],
          ...order_map['天赋材料'],
          ...order_map['武器材料'],
          ...order_map['特产'],
        ]
      })
      const role_show = computed(() => {
        const role_list = player.value[player_active.value].role
        let role = []
        for (let i in role_list) {
          let role_item = role_list[i].role
          let weapon_item = role_list[i].weapon
          let artifacts_item = role_list[i].artifacts
          let info_item = role_list[i].info
          if (!artifacts_item.b) artifacts_item.b = artifacts_item.a
          role.push({
            role: {
              name: role_item.name,
              count: [
                !!role_item.name ? percentageGet(role_item.count) : 0,
                !!role_item.name ? Math.max(...role_item.count) : '',
              ],
              level: [
                !!role_item.name ? percentageGet(role_item.level) : 0,
                !!role_item.name ? Math.max(...role_item.level) : '',
              ],
              skill: {
                q: [
                  !!role_item.name ? percentageGet(role_item.skill.q) : 0,
                  !!role_item.name ? Math.max(...role_item.skill.q) : '',
                ],
                e: [
                  !!role_item.name ? percentageGet(role_item.skill.e) : 0,
                  !!role_item.name ? Math.max(...role_item.skill.e) : '',
                ],
                a: [
                  !!role_item.name ? percentageGet(role_item.skill.a) : 0,
                  !!role_item.name ? Math.max(...role_item.skill.a) : '',
                ],
              }
            },
            weapon: {
              name: weapon_item.name,
              count: [
                !!weapon_item.name ? percentageGet(weapon_item.count) : 0,
                !!weapon_item.name ? Math.max(...weapon_item.count) : '',
              ],
              level: [
                !!weapon_item.name ? percentageGet(weapon_item.level) : 0,
                !!weapon_item.name ? Math.max(...weapon_item.level) : '',
              ],
            },
            artifacts: {
              a: artifacts_item.a,
              b: artifacts_item.b,
              sl: !!artifacts_item.a ? artifacts_item.sl : ['', false],
              bz: !!artifacts_item.a ? artifacts_item.bz : ['', false],
              tg: !!artifacts_item.a ? artifacts_item.tg : ['', false],
            },
            info: {
              sm: [
                !!artifacts_item.a ? percentageGet(info_item.sm) : 0,
                !!artifacts_item.a ? Math.max(...info_item.sm) : '',
              ],
              gj: [
                !!artifacts_item.a ? percentageGet(info_item.gj) : 0,
                !!artifacts_item.a ? Math.max(...info_item.gj) : '',
              ],
              jt: [
                !!artifacts_item.a ? percentageGet(info_item.jt) : 0,
                !!artifacts_item.a ? Math.max(...info_item.jt) : '',
              ],
              bj: [
                !!artifacts_item.a ? percentageGet(info_item.bj) : 0,
                !!artifacts_item.a ? Math.max(...info_item.bj) : '',
              ],
              bs: [
                !!artifacts_item.a ? percentageGet(info_item.bs) : 0,
                !!artifacts_item.a ? Math.max(...info_item.bs) : '',
              ],
              cn: [
                !!artifacts_item.a ? percentageGet(info_item.cn) : 0,
                !!artifacts_item.a ? Math.max(...info_item.cn) : '',
              ],
            }
          })
        }
        return role
      })

      const copyRole = (key) => {
        const r = JSON.parse(JSON.stringify(player.value[player_active.value].role[key]))
        player.value[player_active.value].role.unshift(r)
      }

      const deleteRole = (key) => {
        dialogOpen({
          title: '删除角色',
          content: '是否确认删除角色？',
          cancel_text: '取消',
          confirm: () => {
            player.value[player_active.value].role.splice(key, 1)
            savePlayer()
          }
        })
      }

      const roleComputed = () => {
        savePlayer()
      }

      const backpackIcon = (name) => {
        if (name in data_map.value.items) {
          return data_map.value.items[name].icon
        } else {
          switch (name) {
            case '祈愿/武器':
            case '祈愿/角色':
              return data_map.value.items['纠缠之缘'].icon
          }
          return ''
        }
      }

      const backpackValueUpdate = (e, name) => {
        if (!Number(e.target.value)) {
          player.value[player_active.value].backpack.backpack[name] = 0
        }
        savePlayer()
      }

      const backpackGoldUpdate = (e, name) => {
        if (!Number(e.target.value)) {
          player.value[player_active.value].backpack[name] = backpack_data_default[name]
        }
        savePlayer()
      }

      const openVideoClick = (video) => {
        if (!video) return
        window.open(video)
      }

      const moveRoleClick = (index, type) => {
        if (type + index >= 0 && type + index < player.value[player_active.value].role.length) {
          const role_item = player.value[player_active.value].role[index]
          player.value[player_active.value].role[index] = player.value[player_active.value].role[index + type]
          player.value[player_active.value].role[index + type] = role_item
          savePlayer()
        }
      }

      const needMoreType = (list) => {
        let role = false
        let weapon = false
        for (let i = 2; i < list.length; i++) {
          if (list[i] in data_map.value.roles) {
            role = true
          } else {
            weapon = true
          }
          if (role && weapon) {
            break
          }
        }
        let ret = []
        if (role) ret.push('角色')
        if (weapon) ret.push('武器')
        return ret.join('/')
      }

      onMounted(() => {
        init()
      })

      return {
        week_day,
        plan_list,
        need_list,
        artifacts_map,
        choose_search,
        edit_hold,
        edit_show,
        edit_data,
        edit_active,
        backpack_show,
        role_show,
        data_map,
        player,
        player_active,
        tab_active,
        button_config,
        dialog_show,
        dialog_option,
        value_info_show,
        order_list_show,
        backpack_value_show,
        push_type,
        needMoreType,
        pushTypeChange,
        moveRoleClick,
        openVideoClick,
        backpackGoldUpdate,
        backpackValueUpdate,
        backpackIcon,
        checkBackpackValueChange,
        valueInfoShowChange,
        copyRole,
        artifactsClick,
        breakChange,
        breakShow,
        chooseRole,
        chooseWeapon,
        chooseArtifacts,
        editConfirmClick,
        createRole,
        updateRole,
        tabChange,
        dialogCancelClick,
        dialogConfirmClick,
        roleComputed,
        deleteRole,
        createPlayer,
        deletePlayer,
        sharePlayer,
        editPlayer,
        importPlayer,
        playerActive,
      }
    }
  }
  const app = createApp(App)
  app.use(ElementPlus)
  app.mount('#app')
</script>
</body>
</html>
